<template>
	<view class="page">
		<view class="user">
			<image src="/static/center2/avatar.png" class="avatar"></image>
				<view class = "ava2">
					<text class="fontff">青青</text>
					<image src = "/static/favico.ico" class = "avatar2"></image>
				</view>
				
		</view>
		<view class="container">
			<view class="rectangle">
				<view class="top-text">上边文字1</view>
				<view class="bottom-text">下边文字下边文字</view>
			</view>
			<view class="rectangle" @click="handleStats(2)">
				<text class="top-text">12</text>
				<text class="bottom-text">今日新增</text>
			</view>
		</view>
		<view class="card">
			<view class="title">常用工具</view>
			<view 
				class="item" 
				v-for="item in toolMenus" 
				:key="item.id"
				@click="handleToolClick(item)"
			>
				<image :src="item.icon"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<tabber></tabber>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import tabber from '@/components/tabber/tabber.vue';

// 定义工具菜单数据
const toolMenus = ref([
	{ id: 5, name: '个人资料', icon: '/static/center2/idcard.png' },
	{ id: 6, name: '我的咨询', icon: '/static/center2/comment.png' },
	{ id: 7, name: '我的消息', icon: '/static/center2/bell.png' },
	{ id: 8, name: 'BUG反馈', icon: '/static/center2/bug.png' },
	{ id: 9, name: '联系客服', icon: '/static/center2/whatsapp.png' },
	{ id: 10, name: '系统设置', icon: '/static/center2/setting.png' }
]);

// 处理工具点击
const handleToolClick = (item) => {
	console.log('点击工具:', item.name);
	// TODO: 根据不同工具执行相应操作
};

// 处理统计点击
const handleStats = (type) => {
	console.log('点击统计:', type);
	// TODO: 根据类型查看详细统计
};

// 隐藏系统tabBar
onShow(() => {
	uni.hideTabBar();
});
</script>

<style lang="scss" scoped>
.page {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 600rpx;
  background-image: url("/static/center2/me-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding-top: 20rpx;
  box-sizing: border-box;

  .avatar {
    height: 120rpx;
    width: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    margin-bottom: 16rpx;
  }

  .ava2 {
    display: flex;
    align-items: center;
    .fontff {
      font-size: 36rpx;
      font-weight: 600;
      margin-right: 10rpx;
    }
    .avatar2 { // VIP or status icon
      height: 32rpx;
      width: 32rpx;
    }
  }
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  width: 100%;
  box-sizing: border-box;
  margin-top: -40rpx;
  position: relative;
  z-index: 10;
}

.rectangle {
  flex: 1;
  background: #fff;
  padding: 24rpx;
  margin: 0 10rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .top-text {
    font-size: 36rpx;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 4rpx;
    line-height: 1.2;
  }

  .bottom-text {
    font-size: 24rpx;
    color: #718096;
    line-height: 1.2;
  }
}

.card {
  background-color: #ffffff;
  width: calc(100% - 40rpx);
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 20rpx 0;
  box-sizing: border-box;

  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #2d3748;
    padding: 0 30rpx 20rpx 30rpx;
    border-bottom: 1rpx solid #e2e8f0;
    margin-bottom: 10rpx;
  }

  .item {
    display: flex;
    align-items: center;
    padding: 25rpx 30rpx;
    transition: background-color 0.2s ease;
    
    &:active {
      background-color: #f7fafc;
    }

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 25rpx;
    }

    text {
      font-size: 30rpx;
      color: #4a5568;
    }
    
    &::after {
      content: '>';
      margin-left: auto;
      color: #a0aec0;
      font-size: 28rpx;
    }
  }
}

.member {
  display: none;
}
</style>